<template>
  <div class="c-pb100" :class="[theme , {'c-flex-column c-justify-center c-aligni-center':isShowModule}]">
    <template v-if="upgradeType == 1">
      <div class="c-p" :class="pageContent != null && pageContent.length != 0 ? 'c-minh720' : 'c-minh360'">
        <div @click="clickDesc" class="tinymce-text c-ww-ba c-contexty-scroll" v-html="pageContent">
        </div>
        <div v-show="showUserNum == 1" class="c-flex-row c-pa c-fs80 c-w100 c-hh240 c-justify-center" :class="pageContent != null && pageContent.length != 0 ? 'c-p-t720' : 'c-p-t90'" v-if="isBCompany != 1">
          <img class="img-vip-member" src="../../../../public/i/wap/member/bg_vip_member.png" alt="" />
          <div class="img-vip-number" v-for="(item,index) in personNum" :key="index" :class="index == 0 ? '':'c-ml4'">
            <img class="c-w100" :src="$addXossFilter(mapNumber[item])" alt="0" />
          </div>
        </div>
      </div>

      <div class="c-pb60 c-flex-column c-flex-center">
        <div class="c-w100 c-pt48 c-flex-row c-flex-center">
          <img class="c-ww140 c-hh140 c-brp50" :src="$addXossFilter(headImgUrl || require('@/assets/defult_head.png'))" alt="" />
        </div>
        <div class="c-w100 c-textAlign-c c-pt12 c-fs28 c-fc-gray">{{nickName}}</div>
        <div v-show="vipType == 1" class="c-fs32 c-fw-b c-fc theme-fc c-pt28">支付{{price}}元，升级成为{{upgradeMemberJump == 1 ? 'VIP' : 'SVIP'}}</div>
        <div v-show="vipType != 1" class="c-fs32 c-fw-b c-fc theme-fc c-pt28">{{memberDesc ? memberDesc : "你离大牛只有一步之遥"}}</div>
        <div class="c-fs24 c-fc-gray c-pt16 c-pb24">即可享受名师课程，立刻行动吧！</div>
        <div v-show="vipType == 1" class="c-ww350 c-fs28 c-fc-white c-lh50 c-hh50 theme-bg c-textAlign-c c-br10" @click="clickVipUp(upgradeMemberJump)">{{'立即购买' | iosPayText('1')}}</div>
        <div v-show="vipType != 1" class="c-ww350 c-fs28 c-fc-white c-lh50 c-hh50 theme-bg c-textAlign-c c-br10" @click="clickStudyNow">立即学习</div>

      </div>

      <div v-if='vipType != 1' class="c-pz99 c-pf c-p-b0 c-maxw640 c-hh100  c-bd-t1 c-w100 c-flex-row c-aligni-center c-ph24 c-bg-white">
        <div class="c-w0 c-flex-grow1 c-fs20 theme-fc">
          分享给好友，一起进步哦！
        </div>
        <div @click="isShowShare = true" class="c-hh60 c-lh60 c-ww180 c-textAlign-c theme-bg c-fc-white c-fs28 c-br10">
          立即分享
        </div>
      </div>

      <div v-else class="c-pz99 c-pf c-p-b0 c-maxw640 c-hh100  c-bd-t1 c-w100 c-flex-row c-aligni-center c-ph24 c-bg-white">
        <div class="c-w0 c-flex-grow1">
          <div class="c-fs32"><span class="c-fs12">{{'￥' | iosPriceFilter}}</span>{{price}}</div>
          <div class="c-pl4 c-fs20 theme-fc c-text-ellipsis1">{{vipDesc}}</div>
        </div>
        <div @click="clickVipUp(upgradeMemberJump)" class="c-hh60 c-lh60 c-ww180 c-textAlign-c theme-bg c-fc-white c-fs28 c-br10">
          立即升级
        </div>
      </div>
      <share-masker v-if="isShowShare" :isShowShare="isShowShare" @closeShare="isShowShare=false;"></share-masker>
    </template>
    <template v-else>
      <div v-for="(item, index) in content" :key="index">
        <!-- 宣传图 -->
        <div class="c-w100" v-if="item.modelType == 0 && item.isShowModule == 1" @click="handleClickImg(item.items.image)">
          <img :src="$addXossFilter(item.items.image)" alt="" class="c-w100">
        </div>
        <!-- 累计学员 -->
        <div class="c-p c-hh240" v-if="item.modelType == 1 && item.isShowModule == 1">
          <div class="c-flex-row c-pa c-fs80 c-w100 c-hh240 c-justify-center">
            <img class="img-vip-member" src="../../../../public/i/wap/member/bg_vip_member.png" alt="" />
            <div class="img-vip-number" v-for="(pItem,pIndex) in personNum" :key="pIndex" :class="pIndex == 0 ? '':'c-ml4'">
              <img class="c-w100" :src="$addXossFilter(mapNumber[pItem])" alt="0" />
            </div>
          </div>
        </div>
        <!-- 显示内容 -->
        <div class="c-p" v-if="item.modelType == 2 && item.isShowModule == 1">
          <div @click="clickDesc" class="tinymce-text c-ww-ba c-contexty-scroll" v-html="pageContent"></div>
        </div>
        <!-- 会员展示 -->
        <div v-if="item.modelType == 3 && item.isShowModule == 1">
          <div class="c-pb60 c-flex-column c-flex-center">
            <div class="c-w100 c-pt48 c-flex-row c-flex-center">
              <img class="c-ww140 c-hh140 c-brp50" :src="$addXossFilter(headImgUrl || require('@/assets/defult_head.png'))" alt="" />
            </div>
            <div class="c-w100 c-textAlign-c c-pt12 c-fs28 c-fc-gray">{{nickName}}</div>
            <div v-show="vipType == 1" class="c-fs32 c-fw-b c-fc theme-fc c-pt28 c-ws-pw">{{item.items.isVipDescEnable == 0 ? `支付${price}元，升级成为${item.items.upgradeMemberJump == 1 ? 'VIP' : 'SVIP'}` : item.items.vipDesc1}}</div>
            <div v-show="vipType != 1" class="c-fs32 c-fw-b c-fc theme-fc c-pt28">{{item.items.vipDesc2}}</div>
            <div v-show="vipType == 1" class="c-fs24 c-fc-gray c-pt16 c-pb24 c-ws-pw">{{item.items.memberDesc1}}</div>
            <div v-show="vipType != 1" class="c-fs24 c-fc-gray c-pt16 c-pb24 c-ws-pw">{{item.items.memberDesc2}}</div>
            <div v-show="vipType == 1" class="c-ww350 c-fs28 c-fc-white c-lh50 c-hh50 theme-bg c-textAlign-c c-br10" @click="clickVipUp(item.items.upgradeMemberJump)">{{'立即购买' | iosPayText('1')}}</div>
            <div v-show="vipType != 1" class="c-ww350 c-fs28 c-fc-white c-lh50 c-hh50 theme-bg c-textAlign-c c-br10" @click="clickStudyNow">立即学习</div>
          </div>
          <div v-if='vipType != 1' class="c-pz99 c-pf c-p-b0 c-maxw640 c-hh100  c-bd-t1 c-w100 c-flex-row c-aligni-center c-ph24 c-bg-white">
            <div class="c-w0 c-flex-grow1 c-fs20 theme-fc">
              {{item.items.pageContent2}}
            </div>
            <div @click="isShowShare = true" class="c-hh60 c-lh60 c-ww180 c-textAlign-c theme-bg c-fc-white c-fs28 c-br10">
              立即分享
            </div>
          </div>
          <div v-else class="c-pz99 c-pf c-p-b0 c-maxw640 c-hh100  c-bd-t1 c-w100 c-flex-row c-aligni-center c-ph24 c-bg-white">
            <div class="c-w0 c-flex-grow1">
              <div class="c-fs32"><span class="c-fs12">{{'￥' | iosPriceFilter}}</span>{{price}}</div>
              <div class="c-pl4 c-fs20 theme-fc c-text-ellipsis1">{{item.items.pageContent1}}</div>
            </div>
            <div @click="clickVipUp(item.items.upgradeMemberJump)" class="c-hh60 c-lh60 c-ww180 c-textAlign-c theme-bg c-fc-white c-fs28 c-br10">
              立即升级
            </div>
          </div>
          <share-masker v-if="isShowShare" :isShowShare="isShowShare" @closeShare="isShowShare=false;"></share-masker>
        </div>
      </div>
      <!-- 当为空时 -->
      <loading-status-tem :noData="isShowModule" :noDataText="'哎呀~ 商家偷懒了，未设置页面'"></loading-status-tem>
    </template>
  </div>
</template>
<script>
import shareMasker from "@/components/templates/common/shareMasker.vue";
import { utilJs, wxUtilJs } from "@/utils/common.js";
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import { getBindPhoneSetting } from "@/utils/checkUnBindPhone.js";
export default {
  name: "VipNew",
  components: { shareMasker, loadingStatusTem },

  data() {
    return {
      isBCompany: localStorage.getItem("companyId") == 'ldwk' ? 1 : 0,
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : 'mb5_default',
      mapNumber: {
        0: require('../../../assets/i/wap/vip/number0.png'),
        1: require('../../../assets/i/wap/vip/number1.png'),
        2: require('../../../assets/i/wap/vip/number2.png'),
        3: require('../../../assets/i/wap/vip/number3.png'),
        4: require('../../../assets/i/wap/vip/number4.png'),
        5: require('../../../assets/i/wap/vip/number5.png'),
        6: require('../../../assets/i/wap/vip/number6.png'),
        7: require('../../../assets/i/wap/vip/number7.png'),
        8: require('../../../assets/i/wap/vip/number8.png'),
        9: require('../../../assets/i/wap/vip/number9.png'),
      },
      isShowShare: false,
      showUserNum: 0,
      headImgUrl: "",
      nickName: "",
      vipType: "",
      courseLink: "",
      vipDesc: "",
      upgradeMemberJump: '',
      personNum: [0, 0, 0, 0, 0, 0, 0],
      price: 0,
      pageContent: "",
      memberDesc: "",
      upgradeType: 1, //1旧版2新版
      content: [], //新版模块
      isShowModule: false, //全部隐藏时
      shareDesc: '',
      sharePic: '',
      shareTitle: '',
      bindPhoneSetting: null
      // pageContent:
      //   "<img src='http://112.74.129.24:9090/group1/M00/06/F1/Ci2xMFp-UA2AftabAAL-hzQezt4694.jpg' />"
    };
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() { },

  methods: {
    handleClickImg(src) {
      wxUtilJs.previewImage({
        current: src, // 当前显示图片的http链接
        urls: [src] // 需要预览的图片http链接列表
      });
    },
    clickDesc(e) {
      if (e.target.tagName == 'IMG' && e.target.src) {
        wxUtilJs.previewImage({
          current: e.target.src, // 当前显示图片的http链接
          urls: [e.target.src] // 需要预览的图片http链接列表
        });
      }
    },
    clickVipUp(type) {
      if (
        this.bindPhoneSetting &&
        this.bindPhoneSetting.buyBind
      ) {
        if (utilJs.goBindMobile({goVip: true})) return;
      } else {
        if (type == 2) {
          this.$routerGo(this, "push", { path: "/member/vip/vipDetail", query: { type: global.ckFrom.svip } });
        } else {
          this.$routerGo(this, "push", { path: "/member/vip/vipDetail" });
        }
      }
    },
    //点击立即学习
    clickStudyNow() {
      if (this.courseLink) {
        utilJs.locationHref(this.courseLink);
      } else {
        this.$routerGo(this, "push", { path: "/" });
      }
    },
    getVipInfo() {
      utilJs.getMethod(global.apiurl + "company/upgradeVip", res => {
        this.content = res.content; //新版模块
        this.upgradeType = res.upgradeType; //1旧版2新版
        this.headImgUrl = res.headimgurl;
        this.nickName = res.nickname;
        this.vipType = res.vipType;
        this.price = res.vipPrice;
        this.shareDesc = res.shareDesc;
        this.sharePic = res.sharePic;
        this.shareTitle = res.shareTitle;
        if (this.upgradeType == 1) {
          this.showUserNum = res.showUserNum;
          this.courseLink = res.courseLink;
          this.vipDesc = res.vipDesc;
          this.upgradeMemberJump = res.upgradeMemberJump
          if (res.pageContent && res.pageContent.length > 5) {
            utilJs.getPageHtml(res.pageContent, sres => {
              this.pageContent = sres;
            });
          }
          this.memberDesc = res.memberDesc;
          let personNum =
            res.initUsersNum > 9999999 ? "9999999" : res.initUsersNum + "";
          this.personNum = personNum.padStart(7, "0").split("");
        } else {
          this.content.forEach((el, index) => {
            if (el.modelType == 1) {
              let commonNum = el.items.actualUserNum + el.items.initUsersNum;
              let personNum = commonNum > 9999999 ? "9999999" : commonNum + "";
              this.personNum = personNum.padStart(7, "0").split("");
            } else if (el.modelType == 2) {
              if (el.items.pageContent) {
                utilJs.getPageHtml(el.items.pageContent, sres => {
                  this.pageContent = sres;
                });
              }
            } else if (el.modelType == 3) {
              this.courseLink = el.items.courseLink;
            }
          })
          let showModal = this.content.every((el) => el.isShowModule == 0);
          if (showModal) {
            this.isShowModule = true;
          } else {
            this.isShowModule = false;
          }
        }
        this.wechatShare();
      }, failRes => {
        this.$routerGo(this, "replace", { path: "/error/emptyPage", query: { from: 'reservation', info: '未查询到相关数据' } });
      });
    },
    //分享
    wechatShare: function () {
      let title = this.shareTitle || window.localStorage.getItem("shareTitle");
      let shareImg = this.sharePic || window.localStorage.getItem("shareLogo");
      let shareDesc = this.shareDesc || '点击查看详情';
      let shareUrl =
        window.location.href.split("#")[0] +
        "#" +
        this.$route.path +
        "?refereeId=" +
        localStorage.getItem("userId");
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc, function () { });
    },
    //手机端分享
    appShare: function () {
      let title = this.shareTitle || window.localStorage.getItem("shareTitle");
      let shareImg = this.sharePic || window.localStorage.getItem("shareLogo");
      let shareDesc = this.shareDesc || '点击查看详情';
      var shareUrl =
        window.location.href.split("#")[0] +
        "#/member/vip/vipUpNew" +
        "?refereeId=" +
        localStorage.getItem("userId");
      utilJs.appShareTrue(title, shareImg, shareUrl, shareDesc);
    }
  },
  activated() {
    setDocumentTitle("会员推广");
    getBindPhoneSetting(global.ckFrom.vip).then(res => {
      this.bindPhoneSetting = res;
    });
    this.getVipInfo();
  }
};
</script>

<style scoped>
img {
  pointer-events: none;
}
.img-vip-member {
  width: 100%;
  height: 6rem;
  position: absolute;
  top: 0;
  left: 0;
}
.img-vip-number {
  margin-top: 3rem;
  z-index: 9;
  width: 2rem;
  height: 2.5rem;
}
</style>


